<template>
    <el-popover trigger="click" placement="bottom" :width="popoverWidth">
        <template #default>
            <div class="drop-popover">
                <div v-if="props.follow" class="user-follow">
                    <router-link to="" class="follow-item">
                        <span>150</span>
                        <span>关注</span>
                    </router-link>
                    <router-link to="" class="follow-item">
                        <span>1001</span>
                        <span>粉丝</span>
                    </router-link>
                    <router-link to="" class="follow-item">
                        <span>12</span>
                        <span>收藏</span>
                    </router-link>
                </div>
                <div class="drop-menu">
                    <a @click="toMyIndex">
                        <i class="icon-my"></i>
                        <span class="drop-menu-text">我的主页</span>
                        <i class="arrow icon-arrowright"></i>
                    </a>
                    <RouterLink to="/setting">
                        <i class="icon-setting"></i>
                        <span class="drop-menu-text">设置</span>
                        <i class="arrow icon-arrowright"></i>
                    </RouterLink>
                    <a @click="toLogout">
                        <i class="icon-logout"></i>
                        <span class="drop-menu-text">退出</span>
                        <i class="arrow icon-arrowright"></i>
                    </a>
                </div>
            </div>
        </template>
        <template #reference>
            <Avatar :src="useMyInfo?.avatarUrl"></Avatar>
        </template>
    </el-popover>
</template>

<script lang="ts" setup> 
import { storeToRefs } from 'pinia'
import Avatar from './Avatar.vue'
import useStore from '@/store'
import { Local } from '@/assets/utils/storage'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()
const local = new Local()

const props = defineProps({
    follow: {
        type: Boolean,
        default: true
    },
    showArrow: {
        type: Boolean,
        default: true
    },
    popoverWidth: {
        type: String || Number,
        default: '200'
    }
})
const { user } = useStore()
const { useToken, useMyInfo } = storeToRefs(user)

// 跳转到我的主页
const toMyIndex = async () : Promise<void> => {
    const info = useMyInfo.value
    if(!info || !info.id) {
        const token =  useToken || local.get('token')
        if(!token) {
            user.setToken('')
        } else {
            const res = await user.getMyInfo()
            if(res.id) {
                router.push({ path: `/user/${res.id}/article` })
            } else {
                ElMessage.error('未获取到用户信息')
            }
        }
    } else {
        router.push({ path: `/user/${info.id}/article` })
    }
}

// 退出登录
const toLogout = () => {
    user.clearLogin()
}

</script>

<style lang="less" scoped>
@import '@/assets/css/drop-menu.less';

.user-follow {
    padding: 0 15px;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;

    .follow-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--color-text-p);

        &:hover {
            color: var(--color-primary);
        }
    }
}

.drop-menu {
    .drop-menu-text {
        margin-left: 5px;
    }

    .arrow {
        margin-left: auto;
    }
}</style>
